<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>PRODUCTS - BIO PLASTIC(S)PTE LTD</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/flexslider.css">
    <link rel="stylesheet" href="assets/css/web.css">
    <script src="assets/js/vendor/jquery-1.10.2.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.flexslider-min.js"></script>
  </head>
  <body>
    <script>
      function openPage(page_name) {
        $('.slider').fadeOut('medium');
        $('.' + page_name).fadeIn('medium');
        // The slider being synced must be initialized first
        $('.' + page_name).find('.carousel').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          itemWidth: 210,
          itemMargin: 5,
          asNavFor: '.' + page_name + ' .slider-wrapper'
        });

        $('.' + page_name).find('.slider-wrapper').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          sync: "." + page_name + " .carousel"
        });
        $('.' + page_name).find('.carousel').find('img').click(function() {
          $('.' + page_name).find('.slider-caption').html($(this).attr('title'));
          var thumbnail_link = $(this).attr('src');
          var number_images = $('.' + page_name).find('.carousel').find('img').length;
          $('.' + page_name).find('.carousel').find('img').each(function(index) {
            if ($(this).attr('src') == thumbnail_link) {
              $('.slider-number').html((index + 1) + " of " + number_images);
            }
          })
        })
      }
      $(document).ready(function() {
        openPage('slider-bio-additives');
        $('.products-left-menu-main li').click(function() {
          $('.products-left-menu-main li').removeClass("products-left-menu-active");
          $(this).addClass('products-left-menu-active');
        })
      });

    </script>
    <header class="navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="home-link" style="height: auto" href="./">
            <img class="logo" width="100%" src="assets/img/logo.png" />
          </a>
        </div>
        <nav role="navigation" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="./">Home</a>
            </li>
            <li>
              <a href="aboutus.html">
                About us
              </a>
            </li>
            <li>
              <a href="why-bio-plastic.html">
                Why Bio-Plastic
              </a>
            </li>
            <li class="current-menu-item active">
              <a href="products.html"> 
                Products
              </a>
            </li>
            <li>
              <a href="faqs.html">
                FAQS
              </a>
            </li>
            <li>
              <a href="careers.html">
                Careers
              </a>
            </li>
            <li>
              <a href="contact.html">
                Contact
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="body">
      <div class="main">
        <div class="products-container">
          <div class="container">
            <div class="products-content">
              <div class="products-content-title clearfix">
                <span class="content-label" style="float: left;">
                  PRODUCTS
                </span>
                <div class="products-menu-mobile">
                  <select class="form-control" onchange="openPage(value);">
                    <option value="slider-bio-additives">
                      Oxo Bio-Additives
                    </option>
                    <option value="slider-bio-degradable">
                      Oxo Bio-Degradable Platics
                    </option>
                    <option>
                      Paper Products
                    </option>
                    <option>
                      Non Woven Bags
                    </option>
                  </select>
                </div>
              </div>
              <div class="products-content-main">
                <div class="products-left-menu">
                  <span class="products-left-menu-title">
                    Range of Products
                  </span>
                  <ul class="products-left-menu-main">
                    <li class="products-left-menu-active">
                      <span onclick="openPage('slider-bio-additives')">Oxo Bio-Additives</span>
                    </li>
                    <li>
                      <span onclick="openPage('slider-bio-degradable')">Oxo Bio-Degradable Platics</span>
                    </li>
                    <li>
                      Paper Products
                    </li>
                    <li>
                      Non Woven Bags
                    </li>
                  </ul>
                </div>
                <div class="products-images">
                  <div class="slider-bio-additives slider clearfix" style="display: block;">
                    <div class="slider-wrapper">
                      <ul class="slides product-page">
                        <li>
                          <img src="assets/img/product-1.png" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-2.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-3.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-4.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-5.jpg" alt="" />
                        </li>
                      </ul>
                      <div class="slider-caption">
                        caption 1
                      </div>
                      <div class="slider-title">
                        OXO BIO-ADDITIVES
                      </div>
                    </div>
                    <div class="slider-control">
                      <div class="slider-control-prev" onclick="$('.slider-thumbnail').find('.flex-prev').trigger('click')">
                        <img src="assets/img/prev-arrow.png">
                      </div>
                      <div class="slider-thumbnail">
                        <div class="slider-thumbnail-container carousel">
                          <ul class="slides">
                            <li>
                              <img title="caption 1" src="assets/img/product-1.png" />
                            </li>
                            <li>
                              <img title="caption 12" src="assets/img/product-2.jpg" />
                            </li>
                            <li>
                              <img title="caption 13" src="assets/img/product-3.jpg" />
                            </li>
                            <li>
                              <img title="caption 14" src="assets/img/product-4.jpg" />
                            </li>
                            <li>
                              <img title="caption 15" src="assets/img/product-5.jpg" />
                            </li>
                          </ul> 
                        </div>
                      </div>
                      <div class="slider-control-next" onclick="$('.slider-thumbnail').find('.flex-next').trigger('click')">
                        <img src="assets/img/next-arrow.png">
                      </div>
                      <div class="slider-number">
                        1 of 5
                      </div>
                    </div>
                  </div>
                  <div class="slider-bio-degradable slider clearfix" style="display: block;">
                    <div class="slider-wrapper">
                      <ul class="slides product-page">
                        <li>
                          <img src="assets/img/product-2.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-1.png" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-4.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-3.jpg" alt="" />
                        </li>
                        <li>
                          <img src="assets/img/product-5.jpg" alt="" />
                        </li>
                      </ul>
                      <div class="slider-caption">
                        caption 1a
                      </div>
                      <div class="slider-title">
                        OXO BIO-ADDITIVES
                      </div>
                    </div>
                    <div class="slider-control">
                      <div class="slider-control-prev" onclick="$('.slider-thumbnail').find('.flex-prev').trigger('click')">
                        <img src="assets/img/prev-arrow.png">
                      </div>
                      <div class="slider-thumbnail">
                        <div class="slider-thumbnail-container carousel">
                          <ul class="slides">
                            <li>
                              <img title="caption 1a" src="assets/img/product-2.jpg" />
                            </li>
                            <li>
                              <img title="caption 1b" src="assets/img/product-1.png" />
                            </li>
                            <li>
                              <img title="caption 1c" src="assets/img/product-4.jpg" />
                            </li>
                            <li>
                              <img title="caption 1d" src="assets/img/product-3.jpg" />
                            </li>
                            <li>
                              <img title="caption 1e" src="assets/img/product-5.jpg" />
                            </li>
                          </ul> 
                        </div>
                      </div>
                      <div class="slider-control-next" onclick="$('.slider-thumbnail').find('.flex-next').trigger('click')">
                        <img src="assets/img/next-arrow.png">
                      </div>
                      <div class="slider-number">
                        1 of 5
                      </div>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="col-md-4">
          <nav id="footer-menu">
            <ul>
              <li>
                <a href="term-of-use.html">Term of Use</a>
              </li>
              <li>
                <a href="privacy-policy.html">Privacy Policy</a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="col-md-8">
          <p class="copy-right">
            © 2014 Bio-Plastic  (S) Pre Ltd. All Rights Reserved 
          </p>
          <a  target="_blank" href="www.reverteplastics.com" style="" class="footer-parter-logo"><img src="assets/img/reverte_logo.jpg" alt="BIO" style="height: 33px;"/></a>
        </div>
      </div>
    </footer>
  </body>
</html>
